<#include "/common/taglibs.ftl" />
<#assign entityName='configuration'/>
<@menu code='${entityName!}'/>
<title><@spring.message code="${entityName!}" /> - <@spring.message code="list" /></title>
<div class="m-portlet m-portlet--mobile">
    <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
            <div class="m-portlet__head-title">
                <h3 class="m-portlet__head-text">
                    <i class="la la-user"></i> <@spring.message code="${entityName!}"/>
                </h3>
            </div>
        </div>
    </div>
    <div class="m-portlet__body">
        <div class="table-container">
            <@showMessage />
            <@tableHeaderButtons resourceIdentity='${resourceIdentity!}'/>
            <@tableColumnButtons resourceIdentity='${resourceIdentity!}'>
                <@security.authorize access="hasAuthority('maintain:configuration:update')">
                    <button class="btn btn-sm btn-outline-brand m-btn m-btn--icon m-btn--pill" data-type='edit-configuration'><i class="la la-edit"></i> <@spring.message code="button.edit"/></button>
                </@security.authorize>
            </@tableColumnButtons>
            <table class="table table-striped- table-bordered table-hover table-checkable dataTable dtr-inline" id="datatable"
                   data-datatable="true"
                   data-datatable-advance-search="true"
                   data-datatable-quick-search-filter="search_LIKE_key_OR_value"
            >
                <thead>
                <tr role="row" class="heading">
                    <#--<th width="1%" data-checkable="true" data-orderable="false"></th>-->
                    <th width="30%" data-data="key"> <@spring.message code="configuration.key"/> </th>
                    <th width="30%" data-data="value" data-orderable="false"> <@spring.message code="configuration.value"/> </th>
                    <th width="15%" data-actions="true"> <@spring.message code="action"/> </th>
                </tr>
                </thead>
                <tbody> </tbody>
            </table>
        </div>
    </div>
</div>

<page-plugin-style>
</page-plugin-style>
<page-style>
</page-style>
<page-plugin-script>
</page-plugin-script>
<page-script>
    <script>
        $('#datatable').on('action.mdt.row.button', function (e, grid, $table, $button, rowIndex, rowData) {
            var type = $button.data("type");
            if(type === 'edit-configuration'){
                var oldKey = rowData.key;
                var oldValue = rowData.value;
                $.m.confirm({
                    type: null,
                    title:'<@spring.message code="configuration"/>',
                    html: '<form class="m-form" style="text-align:left">'
                    +'<div class="m-form__section">'
                    +'<div class="form-group m-form__group">'
                    +'<label class="control-label" for="configurationKey" ><@spring.message code="configuration.key"/></label>'
                    +'<input id="configurationKey" class="form-control" value="'+oldKey+'">'
                    +'</div>'
                    +'<div class="form-group m-form__group">'
                    +'<label class="control-label" for="configurationValue" ><@spring.message code="configuration.value"/></label>'
                    +'<input id="configurationValue" class="form-control" value="'+oldValue+'">'
                    +'</div></div></form>',
                    ok: function(){
                        var configKey = $("#configurationKey").val();
                        var configValue = $("#configurationValue").val();
                        if(!configKey){
                            $.m.alert('Key should not be blank');
                            return false;
                        }
                        $.m.ajaxAction({
                            url: "${ctx}/maintain/configuration/update",
                            data: {
                                key: configKey,
                                value: configValue
                            },
                            successCallback: function(data){
                                grid.getDataTable().ajax.reload();
                                $.m.success("Update successfully");
                            }
                        });
                    }
                })
            }
        });
    </script>
</page-script>
